<template>
  <div class="score">
    <h3>最终得分</h3>
    <p> <span :class="[{'pass':score>=90},{'nopass':score<90}]"> {{score}}</span> / 100</p>
  </div>
</template>
<script>
import { onMounted, ref } from 'vue'
import { getScore } from '@/libs/utils.js'
import { useStore } from 'vuex'
export default {
  name: 'score',

  setup() {
    const score = ref(0)
    const store = useStore()
    onMounted(() => {
      score.value = getScore(store.state.MyAuswer)
    })
    return {
      score
    }
  }
}
</script>
<style lang="less" scoped>
.score {
  text-align: center;
  h3 {
    margin: 10px 0;
    font-size: 16px;
    color: #446e9c;
    font-weight: 400;
  }
}
.nopass {
  color: red;
}
.pass {
  color: green;
}
</style>
